<template>
    <div style="width: 100%; box-shadow: var(--el-border-color-light) 0px 0px 10px">
        <el-splitter>
            <el-splitter-panel :size="'80%'" style="height: 900px; padding: 10px;">
                <div class="demo-panel">
                    <el-row :gutter="24">
                        <el-col :span="24" style="border-bottom: 1px black solid; padding-bottom: 10px;">
                            <el-button size="default" @click="printPage" plain><el-icon>
                                    <Printer />
                                </el-icon>打印</el-button>

                            <el-button size="default" @click="update" plain><el-icon>
                                    <CopyDocument />
                                </el-icon>编辑</el-button>
                            <el-button size="default" @click="Delete" plain><el-icon>
                                    <CopyDocument />
                                </el-icon>删除1</el-button>

                        </el-col>


                        <el-col :span="24">
                            <div class="grid-content ep-bg-purple-light" style="padding: 15px 0;">
                                <el-form-item label="具体招聘需求" label-position="top"
                                    :style="{ fontSize: '15px', fontWeight: 'bold', borderBottom: '1px dashed #e4e7ed' }">
                                    <div class="progress-bar">
                                        <div class="progress"></div>
                                    </div>
                                </el-form-item>

                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div class="grid-content ep-bg-purple">
                                <el-form-item label="简历编号" label-position="top">
                                    <el-input :model-value="DataInformation?.candidateid" style="width: 260px;"
                                        disabled />
                                </el-form-item>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div class="grid-content ep-bg-purple">
                                <el-form-item label="所属需求编号" label-position="top">
                                    <el-input :model-value="DataInformation?.resumeRequirements" style="width: 260px;"
                                        disabled />
                                </el-form-item>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div class="grid-content ep-bg-purple">
                                <el-form-item label="入库时间" label-position="top">
                                    <el-input :model-value="DataInformation?.filterDate" style="width: 260px;"
                                        disabled />
                                </el-form-item>
                            </div>
                        </el-col>
                        <!--  -->
                        <el-col :span="24">
                            <div class="grid-content ep-bg-purple-light" style="padding: 15px 0;">
                                <el-form-item label="意向信息" label-position="top"
                                    :style="{ fontSize: '15px', fontWeight: 'bold', borderBottom: '1px dashed #e4e7ed' }">
                                    <div class="progress-bar">
                                        <div class="progress"></div>
                                    </div>
                                </el-form-item>
                            </div>
                        </el-col>
                        <el-col :span="12">
                            <div class="grid-content ep-bg-purple">
                                <el-form-item label="意向岗位" label-position="top">
                                    <el-input :model-value="DataInformation?.intendedPosition" style="width: 260px;"
                                        disabled />
                                </el-form-item>
                            </div>
                        </el-col>

                        <el-col :span="12">
                            <div class="grid-content ep-bg-purple">
                                <el-form-item label="应聘类型" label-position="top">
                                    <el-input :model-value="DataInformation?.typeofjobapplication" style="width: 260px;"
                                        disabled />
                                </el-form-item>
                            </div>
                        </el-col>
                        <!--  -->
                        <el-col :span="24">
                            <div class="grid-content ep-bg-purple-light" style="padding: 15px 0;">
                                <el-form-item label="个人信息" label-position="top"
                                    :style="{ fontSize: '15px', fontWeight: 'bold', borderBottom: '1px dashed #e4e7ed' }">
                                    <div class="progress-bar">
                                        <div class="progress"></div>
                                    </div>
                                </el-form-item>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div class="grid-content ep-bg-purple-light"><el-form-item label="姓名" label-position="top">
                                    <el-input :model-value="DataInformation?.candidatename" style="width: 260px;"
                                        disabled />
                                </el-form-item>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div class="grid-content ep-bg-purple-light"><el-form-item label="性别" label-position="top">
                                    <el-input placeholder="女" style="width: 260px;" disabled />
                                </el-form-item>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div class="grid-content ep-bg-purple-light"><el-form-item label="名族" label-position="top">
                                    <el-input :model-value="DataInformation?.ethnicGroup" style="width: 260px;"
                                        disabled />
                                </el-form-item>
                            </div>
                        </el-col>
                        <!--  -->

                        <el-col :span="8">
                            <div class="grid-content ep-bg-purple-light"><el-form-item label="籍贯" label-position="top">
                                    <el-input :model-value="DataInformation?.origin" style="width: 260px;" disabled />
                                </el-form-item>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div class="grid-content ep-bg-purple-light"><el-form-item label="户口性质"
                                    label-position="top">
                                    <el-input :model-value="DataInformation?.householdRegistration"
                                        style="width: 260px;" disabled />
                                </el-form-item>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div class="grid-content ep-bg-purple-light"><el-form-item label="政治面貌"
                                    label-position="top">
                                    <el-input :model-value="DataInformation?.politicalAppearance" style="width: 260px;"
                                        disabled />
                                </el-form-item>
                            </div>
                        </el-col>
                        <!--  -->

                        <el-col :span="8">
                            <div class="grid-content ep-bg-purple-light"><el-form-item label="手机号码"
                                    label-position="top">
                                    <el-input :model-value="DataInformation?.cellPhone" style="width: 260px;"
                                        disabled />
                                </el-form-item>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div class="grid-content ep-bg-purple-light"><el-form-item label="邮箱" label-position="top">
                                    <el-input :model-value="DataInformation?.mailbox" style="width: 260px;" disabled />

                                </el-form-item>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div class="grid-content ep-bg-purple-light"><el-form-item label="出生年月"
                                    label-position="top">
                                    <el-input :model-value="DataInformation?.dateOfBirth" style="width: 260px;"
                                        disabled />

                                </el-form-item>
                            </div>
                        </el-col>
                        <!--  -->
                        <el-col :span="8">
                            <div class="grid-content ep-bg-purple-light"><el-form-item label="年龄" label-position="top">
                                    <el-input :model-value="DataInformation?.age" style="width: 260px;" disabled />
                                </el-form-item>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div class="grid-content ep-bg-purple-light"><el-form-item label="学历" label-position="top">
                                    <el-input placeholder="本科" style="width: 260px;" disabled />

                                </el-form-item>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div class="grid-content ep-bg-purple-light"><el-form-item label="学校" label-position="top">
                                    <el-input :model-value="DataInformation?.school" style="width: 260px;" disabled />

                                </el-form-item>
                            </div>
                        </el-col>
                        <!--  -->
                        <el-col :span="8">
                            <div class="grid-content ep-bg-purple-light"><el-form-item label="专业" label-position="top">
                                    <el-input :model-value="DataInformation?.school" style="width: 260px;" disabled />

                                </el-form-item>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div class="grid-content ep-bg-purple-light"><el-form-item label="毕业时间"
                                    label-position="top">
                                    <el-input :model-value="DataInformation?.graduationTime" style="width: 260px;"
                                        disabled />

                                </el-form-item>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div class="grid-content ep-bg-purple-light"><el-form-item label="婚育情况"
                                    label-position="top">
                                    <el-input :model-value="DataInformation?.marriageAndChildbearing"
                                        style="width: 260px;" disabled />

                                </el-form-item>
                            </div>
                        </el-col>
                        <!--  -->
                        <el-col :span="24">
                            <div class="grid-content ep-bg-purple-light" style="padding: 15px 0;">
                                <el-form-item label="工作及实习经历" label-position="top"
                                    :style="{ fontSize: '15px', fontWeight: 'bold', borderBottom: '1px dashed #e4e7ed' }">
                                    <div class="progress-bar">
                                        <div class="progress"></div>
                                    </div>
                                </el-form-item>
                            </div>
                        </el-col>
                        <el-col :span="24">
                            <div class="grid-content ep-bg-purple-light">

                                <el-input clearable style="width: 560px" type="textarea"
                                    :autosize="{ minRows: 5, maxRows: 8 }" :model-value="DataInformation?.lastWork"
                                    disabled />

                            </div>
                        </el-col>
                        <!--  -->
                        <el-col :span="24">
                            <div class="grid-content ep-bg-purple-light" style="padding: 15px 0;">
                                <el-form-item label="简历状态" label-position="top"
                                    :style="{ fontSize: '15px', fontWeight: 'bold', borderBottom: '1px dashed #e4e7ed' }">
                                    <div class="progress-bar">
                                        <div class="progress"></div>
                                    </div>
                                </el-form-item>
                            </div>
                        </el-col>
                        <el-col :span="12">
                            <div class="grid-content ep-bg-purple-light"><el-form-item label="招聘负责人"
                                    label-position="top">


                                    <el-button size="small" style="width: 260px;" ref="buttonRef"
                                        v-click-outside="onClickOutside"><el-icon>
                                            <UserFilled />
                                        </el-icon>早濑优香</el-button>
                                    <el-popover ref="popoverRef" :virtual-ref="buttonRef" trigger="click" title="早濑优香"
                                        virtual-triggering>
                                        <hr>
                                        <span> 部门：人事部 </span><br>
                                        <span> 手机:1008611 </span>
                                    </el-popover>

                                </el-form-item>
                            </div>
                        </el-col>
                        <el-col :span="12">
                            <div class="grid-content ep-bg-purple-light"><el-form-item label="简历状态"
                                    label-position="top">
                                    <el-input :model-value="DataInformation?.resumeStatus" style="width: 260px;"
                                        disabled />

                                </el-form-item>
                            </div>
                        </el-col>
                        <!--  -->
                        <el-col :span="24">
                            <div class="grid-content ep-bg-purple-light"><el-form-item label="意见" label-position="top">
                                    <el-input clearable style="width: 560px" type="textarea"
                                        :autosize="{ minRows: 5, maxRows: 8 }" :model-value="DataInformation?.appraise"
                                        disabled />
                                </el-form-item>
                            </div>
                        </el-col>
                        <!--  -->
                        <el-col :span="24">
                            <div class="grid-content ep-bg-purple-light"><el-form-item label="" label-position="top">
                                    <el-tabs v-model="activeName" type="card" style="padding-left: 30px;"
                                        @tab-click="handleClick">
                                        <!-- 面试信息 -->
                                        <el-tab-pane label="面试信息" name="first">
                                            <el-table :data="InterviewInformation" border
                                                style="width: 1000px;height: 200px;">

                                                <el-table-column v-for="col in InterviewFormHeader" :prop="col.id"
                                                    :key="col.id" :label="col.label" :width="col.width">
                                                </el-table-column>
                                            </el-table>
                                        </el-tab-pane>
                                        <!-- Offer信息 -->
                                        <el-tab-pane label="Offer信息" name="second"><el-table :data="OfferInformation"
                                                border style="width: 1000px;height: 200px;">
                                                <el-table-column v-for="col in OfferHeader" :prop="col.id" :key="col.id"
                                                    :label="col.label" :width="col.width">
                                                </el-table-column>
                                            </el-table></el-tab-pane>
                                    </el-tabs>
                                </el-form-item>
                            </div>
                        </el-col>
                        <!--  -->
                        <el-col :span="24">
                            <div class="grid-content ep-bg-purple-light" style="padding: 15px 0;">
                                <el-form-item label="" label-position="top"
                                    :style="{ fontSize: '15px', fontWeight: 'bold', borderBottom: '1px dashed #e4e7ed' }">
                                    <div class="progress-bar">
                                        <div class="progress"></div>
                                    </div>
                                </el-form-item>
                            </div>
                        </el-col>
                        <!--  -->
                        <el-col :span="24">
                            <div class="grid-content ep-bg-purple-light"><el-descriptions title="" :column="2"
                                    direction="horizontal">
                                    <el-descriptions-item label="提交人："> <el-text class="mx-1"
                                            type="primary">早濑优香</el-text></el-descriptions-item>
                                    <el-descriptions-item label="提交时间：">2025年7月4日16:00:45</el-descriptions-item>
                                    <el-descriptions-item label="更新时间："
                                        :span="2">2025年7月4日16:00:45</el-descriptions-item>
                                </el-descriptions>
                            </div>
                        </el-col>
                    </el-row>
                </div>
                <el-dialog title="修改" v-model="TalentModificationDisplay" fullscreen destroy-on-close>
                    <TalentModification @reF-table="refTable"></TalentModification>
                    <hr>
                </el-dialog>

            </el-splitter-panel>
            <!--  -->
            <el-splitter-panel :max="260" style="height: 900px;">
                <div class="demo-panel" style="padding: 6px;">
                    <el-tabs v-model="DefaultDataComments" tab-position="top" @tab-click="DataComment">
                        <el-tab-pane label="数据日志" name="first">
                            <div class="card-container">
                                <el-card style="width: 250px;">
                                    <el-row :gutter="24">
                                        <el-col :span="12"></el-col>
                                        <el-col :span="12" style="font-size: 10px;">2025-07-09 09:45</el-col>
                                        <el-col :span="12" style="font-size: 12px;">早濑优香</el-col>
                                        <el-col :span="12" style="font-size: 12px;">修改</el-col>
                                        <el-col :span="12" style="font-size: 12px;"><el-icon>
                                                <Tickets />
                                            </el-icon>简历状态：</el-col>
                                        <el-col :span="12" style="font-size: 12px;"></el-col>
                                        <el-col :span="12" style="font-size: 12px;"><el-button type="danger"
                                                size="small" plain round
                                                class="line-through-btn">修改</el-button></el-col>
                                        <el-col :span="12" style="font-size: 12px;"></el-col>
                                        <el-col :span="12" style="font-size: 12px;"><el-button type="success"
                                                size="small" plain round
                                                class="line-through-btn">修改</el-button></el-col>

                                    </el-row>

                                </el-card>
                            </div>
                        </el-tab-pane>
                         <el-tab-pane label="评论" name="second">
                                <div ref="commentContainerRef" style="height: 800px;overflow: auto;">
                                    <div style="position: relative;height: 800px"
                                        v-if="!commentDataContent || commentDataContent.length === 0">
                                        <!-- 父级设置相对定位 -->
                                        <a-empty style="
                                    position: absolute; /* 子元素绝对定位 */
                                    top: 50%;          /* 垂直方向距离顶部50% */
                                    left: 50%;         /* 水平方向距离左侧50% */
                                    transform: translate(-50%, -50%); /* 向左、向上偏移自身50%，实现精准居中 */
                                    " />
                                    </div>
                                    <a-comment v-for="item in commentDataContent" :author="item.user.username"
                                        avatar="https://images.unsplash.com/photo-1747767763480-a5b4c7a82aef?q=80&w=2704&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
                                        :content="item.content" :datetime="item.createdAt"
                                        style="border: 1px solid #eee; border-radius: 10px; padding: 2px; box-shadow: 2px 2px 5px rgba(0,0,0,0.1); max-width: 300px;">
                                        <template #actions>
                                            <span class="action" key="heart" @click="onLikeChange">
                                                <span v-if="like">
                                                    <IconHeartFill :style="{ color: '#f53f3f' }" />
                                                </span>
                                                <span v-else>
                                                    <IconHeart />
                                                </span>
                                                {{ 0 + (like ? 1 : 0) }}
                                            </span>
                                        </template>
                                    </a-comment>
                                </div>
                                <div style="display: flex; justify-content: center; width: 100%;">
                                    <el-input placeholder="留下你的精彩评论吧(Enter：发送)" clearable v-model="content"
                                        style="width: 250px; font-size: 12px;" @keyup.enter="sendComment" />
                                </div>
                            </el-tab-pane>
                    </el-tabs>

                </div>
            </el-splitter-panel>
        </el-splitter>
    </div>
</template>
<script setup lang="ts">
import request from '@/api/request'
import { ref, unref, defineProps,nextTick } from 'vue'
import type { TabsPaneContext } from 'element-plus'
import { ElMessage, ElMessageBox } from 'element-plus'
import { ClickOutside as vClickOutside } from 'element-plus'
import TalentModification from './TalentModification.vue'
const talentId = defineProps(["data"])
const buttonRef = ref()
const popoverRef = ref()
const activeName = ref('first') // 默认选中
const DefaultDataComments = ref('first')//数据评论默认值 
const TalentModificationDisplay = ref(false)//修改弹窗显示

const DataInformation = ref({
})//简历信息

const resumeIdData = ref({
    candidateid:''
})//简历id
//简历信息 
const resumeInformation = () => {
    request({
        url: '/candidateresume/getById',
        method: 'get',
        params: { candidateid: talentId.data }
    })
        .then(res => {
            DataInformation.value = res.data
            console.log('简历信息', DataInformation.value);
            resumeIdData.value=res.data
            request({
                url: '/candidateresume/queryResumeAndInterviewRecordsBasedOnId',
                method: 'get',
                params: { candidateid: talentId.data }
            })
                .then(res => {
                   
                    console.log('简历信息', res.data);
                })
        })

}
resumeInformation()
//打印
const printPage = () => {
    window.print()
}
const update = () => {
    TalentModificationDisplay.value = true;
    console.log('点击了编辑');
}


const Delete = () => {
    ElMessageBox.confirm(
        '你确定要删除所选数据吗？',
        '通知',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'error',
        }
    )
        .then(() => {
            ElMessage({
                type: 'success',
                message: '删除成功',
            })
        })
        .catch(() => {
            ElMessage({
                type: 'warning',
                message: '取消操作',
            })

        })
}
// 点击外部关闭
const onClickOutside = () => {
    unref(popoverRef).popperRef?.delayHide?.()
    console.log("点击了");
}
//  获取当前选中的标签页
const handleClick = (tab: TabsPaneContext, event: Event) => {
    console.log(tab, event)
}
//面试信息表头
const InterviewInformation = ref([
    { id: "1", RequirementID: "zp0001", CandidateID: "JD00001", CandidateName: "结成明日奈", CellPhone: "1008611", RecruiterID: "早濑优香", NumberOfInterviews: "1", ThePlanBegins: '2023-05-01', InterviewEvaluation: "通过" }

])
// 面试信息
const InterviewFormHeader = ref([
    { id: 'resumeRequirements', label: '需求编号', width: '150px' },
    { id: 'candidateID', label: '简历编号', width: '150px' },
    { id: 'candidatename', label: '姓名', width: '150px' },
    { id: 'cellPhone', label: '手机', width: '150px' },
    { id: 'screenpeople', label: '招聘负责人', width: '150px' },
    { id: 'NumberOfInterviews', label: '面试次数', width: '150px' },
    { id: 'ThePlanBegins', label: '发起时间', width: '150px' },
    { id: 'InterviewEvaluation', label: '面试评价', width: '150px' },
])

const OfferHeader = ref([
    { id: 'offerID', label: '招聘负责人', width: '150px' },
    { id: 'offerID1', label: '发放时间', width: '150px' },
    { id: 'offerID2', label: 'offer状态', width: '150px' },
    { id: 'offerID3', label: '所属需求编号', width: '150px' },
    { id: 'offerID4', label: '简历编号', width: '150px' },
    { id: 'offerID5', label: '候选人姓名', width: '150px' },
    { id: 'offerID6', label: 'offer岗位', width: '150px' },
    { id: 'offerID7', label: '入职部门', width: '150px' }
])

const OfferInformation = ref([
    { id: 1, offerID: '开' }
])
const DataComment = (tab: TabsPaneContext, event: Event) => {
    console.log(tab, event)
}
const refTable = () => {
    TalentModificationDisplay.value = false;
}

const commentDataContent = ref([]) //评论数据
const commentContainerRef = ref(null) // 评论容器引用
const content = ref('') //评论内容
const like = ref(false);//点赞
const onLikeChange = () => { //点赞功能
    like.value = !like.value; //改变like的值
};
const commentUserId = ref(1);
const data = ref();
const sendComment = () => {  //发送评论
    data.value = {
        content: content.value,
        commentUserId: commentUserId.value,
        targetId: resumeIdData.value.candidateid
    }
    request({
        url: "/comments/insert",
        method: 'post',
        data: data.value
    }).then(res => {
        console.log(res.data);
        ElMessage.success("发送成功")
        content.value = ''
        commentData()
        scrollToBottom() // 发送成功后滚动到底部
    })
}

const commentData = () => { //评论数据方法
   
    
    request({
        url: '/comments/queryCommentsWithTheBoundID',
        method: 'get',
        params: {
            boundId: resumeIdData.value.candidateid
        }
    }).then(res => {
        console.log(res.data);
        commentDataContent.value = res.data
        console.log('commentDataContent', commentDataContent.value);

        // 数据加载完成后滚动到底部
        scrollToBottom()
    })
}
// 滚动到底部的方法
const scrollToBottom = () => {
    nextTick(() => {
        if (commentContainerRef.value) {
            commentContainerRef.value.scrollTop = commentContainerRef.value.scrollHeight
        }
    })
}
</script>

<style scoped>
/* 外层容器，可控制整体条的高度、圆角等 */
.progress-bar {
    height: 6px;
    background-color: #ccebf7;
    border-radius: 3px;
    display: flex;
    width: 100%;
    /* 确保进度条容器宽度占满父容器 */
    overflow: hidden;
    /* 防止子元素溢出 */
}

.progress {
    width: 8%;
    height: 10;
    background-color: #61c3ea;
    border-radius: 3px 0 0 3px;
    transition: width 0.3s ease;
    /* 添加宽度变化的过渡效果 */
}



/* 单选框选中样式 */
.el-radio.is-checked .radio-custom {
    background-color: #61c3ea;
    border-color: #409EFF;
}

.card-container {
    display: flex;
    /* 卡片排列方式 */
    flex-wrap: wrap;
    /* 卡片之间的间距 */
    justify-content: center;
    /* 居中 */
}

/* 删除按钮样式 */
.line-through-btn {
    text-decoration: line-through;
}
</style>
